<template>
	<!-- 活动业绩详情与今日业绩活动详情   两个页面 -->
	<view>
		<view class="all-perfor">
			<view class="all-perfor-title">
				活动业绩汇总
			</view>
			<view class="all-perfor-tip">
				{{activity_name}}
			</view>
			<view class="all-perfor-money">
				<view class="">
					成交额(元)
				</view>
				<view class="">
					<!-- ¥{{(''+activietyTotalData.all.total).split(".")[0]}}.<text>{{(''+activietyTotalData.all.total).split(".")[1] || "00"}}</text> -->
					¥{{activityData.total}}</text>
				</view>
			</view>
			<view class="course-statistics">
				<view class="course-statistics-title">
					课程数据统计
				</view>
				<view class="course-statistics-content">
					<view class="course-statistics-details">
						<view class="">{{activityData.ordtotal}}</view>
						<view class="">收款订单笔数</view>
					</view>
					<!-- <view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{activityData.courseCount}}</view>
						<view class="">报名课程(个)</view>
					</view>
					<view class="course-statistics-line"></view>
					<view class="course-statistics-details">
						<view class="">{{activityData.sendCount}}</view>
						<view class="">赠送课程(个)</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="all-perfor-contnet">
			<view class="group-state-title">
				<view class="">
					<view class="group-state-contain">
						<view :class="dateDataShow?'group-state-active':''" @click="stateClick('dateDataShow')">
							按日期日期统计
						</view>
						<view :class="employeeDataShow?'group-state-active':''" @click="stateClick('employeeDataShow')">
							按员工统计
						</view>
					</view>
				</view>
			</view>
			<!-- 按日期统计,按照activietyTotalData.date渲染数据 -->
			<view v-if="dateDataShow">  
				<view v-if="dateData.length>0"> 
					<view class="all-perfor-contain" v-for="(item,index) in dateData" :key='index'>
						<view>
							<view class="all-perfor-time">
								<view class="all-perfor-time-left">
									{{item.date}}
								</view>
								<view class="all-perfor-time-money">
									<view class="">成交金额：</view>
									<!-- <view class="">¥200000.00</view> -->
									<view class="">¥{{item.total}}</view>
								</view>
								<view><uni-pagination :total="60"/></view>
							</view>
							<view class="all-perfor-staff-content">
								<view class="all-perfor-staff-title">
									<text>员工</text>
									<text>收款订单数</text>
									<text>金额</text>
								</view>
								<view 
									class="all-perfor-staff-details" 
									v-for="(info,num) in item.datesum"
									:key='num'
								>
									<view class="">	
										<!-- <image src="https://tool.tuanhaoke.cn/static/image/head-portrait.png" mode=""></image> -->
										<image :src="info.customer?info.customer.avatar:''" mode=""></image>
										<!-- <text>张三</text> -->
										<text>{{info.customer?info.customer.nickname:'-' | goodName}}</text>
									</view>
									<!-- <view class="">15</view> -->
									<view class="">{{info.num}}</view>
									<!-- <view class="">￥20.00</view> -->
									<view class="">￥{{info.total}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-else>
					暂无数据！
				</view>
			</view>
			
			<!-- 按员工统计,渲染activietyTotalData.employee中的数据 -->
			<view v-if="employeeDataShow">
				<view v-if="employeeData.length>0">
					<view class="all-perfor-contain" v-for="(item,index) in employeeData" :key='index'>
						<view class="all-perfor-time">
							<view class="all-perfor-img-left">
								<!-- <image src="https://tool.tuanhaoke.cn/static/image/head-portrait.png" mode=""></image> -->
								<image :src="item.user?item.user.avatar:''" mode=""></image>
								<!-- <text>昵称</text> -->
								<text>{{item.user?item.user.nickname:'-'}}</text>
							</view>
							<view class="all-perfor-time-money all-perfor-img-common">
								<view class="">收款金额：</view>
								<!-- <view class="">¥200000.00</view> -->
								<view class="">¥{{item.sumMonery}}</view>
							</view>
						</view>
						<view class="all-perfor-staff-content">
							<view class="all-perfor-staff-title">
								<text>日期</text>
								<text>收款订单数</text>
								<text>收款金额</text>
							</view>
							<view class="all-perfor-staff-details" v-for="(info,num) in item.field" :key='num'>
								<view class="">
									{{info.date_added}}
								</view>
								<view class="">{{info.num}}</view>
								<view class="">￥{{info.total}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data" v-else>
					暂无数据！
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {formatChatTime} from '@/common/util.js'
	export default{
		filters: {
			goodName(value) {
				if (!value) return ''
				if (value.length > 3) {
					return value.slice(0, 3) + '...'
				}
				return value
			}
		},
		data(){
			return {
				store_id:0,
				token:'',
				activity_id: '',
				activity_name : '',
				activityData: {},
				dateData:{},
				employeeData:[],
				dateDataShow:true,
				employeeDataShow:false,
			}
		},
		
		onLoad(option){
			// console.log(option)
			let store_id = parseInt(option.store_id,10);
			// console.log('id',store_id,option.store_id);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.activity_id = uni.getStorageSync('actPerfor').activity_id
			if(option.page == 'manage'){
				this.activity_name = uni.getStorageSync('actPerfor').name
			}else{
				this.activity_name = uni.getStorageSync('actPerfor').activity_title
			}
			// console.log(uni.getStorageSync('actPerfor'))
			this.get_order_activity_total()
		},
		
		methods:{
			handleCurrentChange(i){
				this.page=i
			},
			previous(){
				this.page-=1
			},
			next(){
				this.page+=1
			},
			stateClick(str_tab){
				// console.log(str_tab,'stateClick');
				if(str_tab === 'dateDataShow'){
					
					this.dateDataShow = true;
					this.employeeDataShow = false;
					
				}else{
					
					this.dateDataShow = false;
					this.employeeDataShow = true;
					
				}
				
				// console.log(this.dateDataShow,'stateClick this.dateDataShow');
				// console.log(this.employeeDataShow,'stateClick this.employeeDataShow');
				
			},
			
			// 获取活动业绩数据get_order_activity_total
			get_order_activity_total(){
				
				let data = {
					token: this.$store.getters.getToken,
					activity_id: this.activity_id,
				}
				this.$api.get_order_activity_total(data).then(res => {
					
					// console.log(res,'get_order_activity_total');
					if(res.status){
						
						this.activityData = res.data;
						this.dateData = res.date;
						this.employeeData = res.employee;
						
					}else{
						uni.showToast({
							title:'获取数据失败，请重试！',
							icon:null,
							duration: 2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			
		}
	}
</script>

<style>
	.no-data{
		color: #999999;
		font-size: 28upx;
		text-align: center;
		margin-top: 100upx;
	}
	page{
		background: #F3F3F4;
	}
	.all-perfor{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.all-perfor-title{
		text-align: center;
		color: #666666;
		font-size: 40upx;
		margin-top: 10upx;
	}
	.all-perfor-tip{
		color: #333333;
		font-size: 34upx;
		margin-top: 40upx;
		font-weight: 800;
	}
	.all-perfor-money{
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-top: 1upx solid #DEDEDE;
		margin-top: 30upx;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-perfor-money>view:first-child{
		color: #333333;
		font-size: 30upx;
	}
	.all-perfor-money>view:last-child{
		color: #FF391F;
		font-size: 34upx;
	}
	.all-perfor-money>view>text{
		font-size: 28upx;
	}
	.course-statistics{
		margin-top: 28upx;
	}
	.course-statistics-title{
		color: #333333;
		font-size: 30upx;
	}
	.course-statistics-content{
		display: flex;
		justify-content: space-around;
		margin-top: 40upx;
		text-align: center;		
	}
	.course-statistics-details>view:first-child{
		color: #333333;
		font-size: 60upx;
		margin-bottom: 20upx;
	}
	.course-statistics-details>view:last-child{
		color: #999999;
		font-size: 24upx;
	}
	.course-statistics-line{
		width: 2upx;
		height: 46upx;
		border-left: 2upx solid #DEDEDE;
		margin-top: 20upx;
	}
	.group-state-title{
		width: 100%;
		background: #FFFFFF;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.all-perfor-contnet{
		width: 100%;
	}
	.group-state-title>view{
		padding: 18upx 0;
		box-sizing: border-box;
		width: 100%;
		border-bottom: 1upx solid #DEDEDE;
	}
	.group-state-contain{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.all-perfor-contain{
		width: 100%;
		margin-bottom: 20upx;
		background: #FFFFFF;
		padding:  0 30upx;
		padding-bottom: 30upx;
		box-sizing: border-box;
	}
	.all-perfor-time{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-perfor-time-left{
		color: #333333;
		font-size: 30upx;
	}
	.all-perfor-time-money{
		display: flex;
	}
	.all-perfor-time-money>view:first-child{
		color: #999999;
		font-size: 24upx;
		margin-top: 6upx;
	}
	.all-perfor-time-money>view:last-child{
		color: #FF391F;
		font-size: 34upx;
	}
	.all-perfor-time-money>view:last-child>text{
		font-size: 28upx;
	}
	.all-perfor-staff-content{
		margin-top: 30upx;
	}
	.all-perfor-staff-title{
		width: 100%;
		height: 64upx;
		line-height: 64upx;
		background: #F4F5F9;
		padding: 0 42upx 0 24upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		color: #666666;
		font-size: 24upx;
	}
	.all-perfor-staff-title>text:nth-child(2){
		display: inline-block;
		margin-left: 80upx;
	}
	.all-perfor-staff-details{
		width: 100%;
		display: flex;
		padding: 14upx 0;
		box-sizing: border-box;
		border-bottom: 1upx solid #DEDEDE;
	}
	.all-perfor-staff-details>view,.all-perfor-staff-details>view>text{
		color: #333333;
		font-size: 28upx;
		line-height: 80upx;
	}
	.all-perfor-staff-details>view>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.all-perfor-staff-details>view>text{
		display: inline-block;
		width: 200upx;
		height: 60upx;
		margin-left: 20upx;
		overflow:hidden;
	}
	.all-perfor-staff-details>view:nth-child(1){
		display: flex;
		width: 350upx;
	}
	.all-perfor-staff-details>view:nth-child(2){
		width: 190upx;
	}
	.all-perfor-staff-details>view:nth-child(3){
		width: 150upx;
		text-align: center;
	}
	.all-perfor-img-left{
		display: flex;
	}
	.all-perfor-img-left>image{
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.all-perfor-img-left>text{
		color: #333333;
		font-size: 28upx;
		display: inline-block;
		margin-left: 20upx;
		line-height: 80upx;
	}
	.all-perfor-img-common{
		line-height: 80upx;
	}
</style>
